<template>
	<view class="voice" v-if="isShow">
		<!-- 1，底部按住的补位 -->
		<view class="voice-bottom" :style="{'background':bottomColor}"></view>
		<view class="voice-bottom-zw" :style="{'background':bottomColor}">
		</view>
		<view class="voice-bottom-img">
			<image :src="require('@/static/img/msg/send/05.svg')"></image>
			<view class="text">上滑取消发送</view>
		</view>
		<!-- 2，语音动画 -->
		<chat-voice-icon :isShow="isShow" :titleText="titleText" :voiceBgColor="voiceBgColor"></chat-voice-icon>
	</view>
</template>

<script>
	import chatVoiceIcon from './chat-voice-icon.vue'

	export default {
		components: {
			chatVoiceIcon
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			titleText: {
				type: String,
				default: ''
			},
			bottomColor: {
				type: String,
				default: '#A9A9A9'
			},
			voiceBgColor: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.voice {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		// box-sizing: content-box;
		z-index: 100;
		//黑色透明度40%
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;

		.voice-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100px;
			width: 100%;
			border-radius: 60%;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			//background-color: #3A3A3A;
		}

		.voice-bottom-zw {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 50px;
			width: 100%;
			//background-color: #3A3A3A;
		}

		.voice-bottom-img {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100px;
			width: 100%;
			text-align: center;

			image {
				width: 30px;
				height: 30px;
				margin-top: 35px;
			}

			.text {
				font-size: 36rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}
	}
</style>
